import { useSelector } from "react-redux"
import {
    Table,
    Card,
    Button,
    Space,
    Image,
    Tag,
    Modal,
    message,
} from "antd"
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
import defaultImg from "@/assets/error.png";
import { delArticlesApi } from "@/api/article";
import { useHistory } from "react-router-dom";

const ArticleTable = props => {
    const { onPageChange, onRefresh } = props
    // 定义文章状态对应文字和颜色
    const statusLabel = [
        { text: "草稿", color: "default" },
        { text: "待审核", color: "blue" },
        { text: "审核通过", color: "green" },
        { text: "审核拒绝", color: "red" },
    ];
    // 定义表格列
    const columns = [
        {
            title: "封面",
            dataIndex: "cover",
            key: "cover",
            render: cover => (
                <Image
                    src={cover?.images?.[0] || defaultImg}
                    style={{ objectFit: "cover" }}
                    width={200}
                    height={120}
                    fallback={defaultImg}
                />
            ),
        },
        {
            title: "标题",
            dataIndex: "title",
            key: "title",
        },
        {
            title: "状态",
            dataIndex: "status",
            key: "status",
            render: status => {
                const info = statusLabel[status]
                return <Tag color={info.color}>{info.text}</Tag>
            },
        },
        {
            title: "发布时间",
            dataIndex: "pubdate",
            key: "pubdate",
        },
        {
            title: "阅读数",
            dataIndex: "read_count",
            key: "read_count",
        },
        {
            title: "评论数",
            dataIndex: "comment_count",
            key: "comment_count",
        },
        {
            title: "点赞数",
            dataIndex: "like_count",
            key: "like_count",
        },
        {
            title: "操作",
            key: "action",
            render: (text, record) => (
                <Space size="middle">
                    <Button onClick={() => editArticleFn(record.id)} type="link" icon={<EditOutlined />} />
                    <Button onClick={() => delArticleFn(record.id)} type="link" icon={<DeleteOutlined />} />
                </Space>
            ),
        },
    ];
    // redux中取出需要的数据
    const {
        results,
        page,
        per_page,
        total_count,
    } = useSelector(state => state.article)
    const history = useHistory()
    // 编辑文章
    const editArticleFn = id => {
        history.push(`publish/${id}`)
    }
    // 删除文章
    const delArticleFn = id => {
        Modal.confirm({
            title: '您是否确认删除该文章？',
            cancelText: '取消',
            okText: '确认',
            onOk: async () => {
                const res = await delArticlesApi(id)
                if (res.status === 200) {
                    message.success('删除成功')
                    onRefresh()
                }
            },
        })
    }
    return (
        <Card
            title={`根据筛选条件共查询到 ${total_count} 条结果：`}
            style={{ marginTop: 24 }}
        >
            <Table
                rowKey={row => row.id}
                columns={columns}
                dataSource={results}
                pagination={{
                    total: total_count,
                    current: page,
                    pageSize: per_page,
                    showSizeChanger: true,
                    showQuickJumper: true,
                    showTotal: total => `共${total}条`,
                    onChange: onPageChange,
                }}
            ></Table>
        </Card>
    )
}

export default ArticleTable